<template>
  <div>
    <el-card shadow="never" class="mainCard" v-loading="loading">
      <div style="width: 100%; height: 40px;">
        <el-button type="warning" size="small" link style="float: right; margin-left: 10px;"  @click="reback()">返 回</el-button>
      </div>
      <div style="width: 100%; height: 40px;">
        <el-button type="primary" size="small" link @click="preview()">预览 & 保存</el-button>
        <!-- <el-button type="success" style="margin-left: 10px;" size="small" link @click="deploy()">发 布</el-button> -->
      </div>

      <div style="width: 100%;" class="mainDiv">
        <div style="width: 50%; float: left;"><codemirror id="codemirrorDiv" ref="codemirrorEdit" v-model="appResourceContent" :options="cmOptions" /></div>
        <div style="width: 50%; float: left; height: 100%;">
          <iframe :srcdoc="htmlSrc" height="100%" width="100%" style="border:none;"></iframe>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import applicationResourceApi from '@/api/system/application/resource'
import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

import 'codemirror/mode/javascript/javascript.js';
import "codemirror/mode/markdown/markdown.js";
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/vue/vue.js';
import './setting.js';
export default {
  name: 'cmsPageDesign',
  props: {
		checkedAppResource: {
			type: Object,
			default: {},
		},
	},
  data() {
    return {
      loading: false,
      appResourceContent: '',
      cmOptions: {
				tabSize: 2, // tab
				styleActiveLine: true,
				lineNumbers: true, // 换行操作
				lineWrapping: true, // 换行操作
				styleSelectedText: true,
				line: true,
				foldGutter: true,
				gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
				highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
				mode: 'text/html',
				hintOptions: {
					completeSingle: false,
				},
				keyMap: 'sublime',
				matchBrackets: true,
				showCursorWhenSelecting: true,
				theme: 'monokai',
				// theme: 'solarized',
				extraKeys: {},
			},

      htmlSrc: '',
      
    }
  },
	mounted() {
		this.init();
	},
  methods: {
    preview () {
      let params = {
        id: this.checkedAppResource.id,
        name: this.checkedAppResource.name,
        content: this.appResourceContent,
        enName: this.checkedAppResource.enName,
      }
      applicationResourceApi.update(params).then(res => {
        this.htmlSrc = this.appResourceContent;
        this.$message({ message: '资源模板已保存！', type: 'success' });
      })
    },
    init () {
      this.appResourceContent = this.checkedAppResource.content ? this.checkedAppResource.content : '';
    },
    reback () {
      this.$emit("close");
    },
  }
}
</script>

<style scoped>

/deep/.CodeMirror {
	/* height: 560px !important; */
	height: calc(100vh - 240px);
}
.mainDiv {
  height: calc(100vh - 240px);
}
</style>
